<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部门员工统计</title>
    <!-- 引入jQuery和ECharts库 -->
    <script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
<!-- 容器用于展示柱状图和饼图 -->
<div id="barChart" style="width: 600px; height: 400px;"></div>
<div id="pieChart" style="width: 600px; height: 400px;"></div>
<div id="main3" style="width: 600px; height: 400px;"></div>

<script type="text/javascript">
    $(document).ready(function() {
        // 发送AJAX请求获取数据
        $.ajax({
            url: 'work1.php', // PHP脚本的URL
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                // 成功接收到数据
                console.log(data); // 用于调试查看数据

                // 处理数据并创建图表
                var departmentNames = data.map(function(item) { return item.name; });
                var totalEmployees = data.map(function(item) { return item.totalEmployees; });
                var maleCounts = data.map(function(item) { return item.maleCount; });
                var femaleCounts = data.map(function(item) { return item.femaleCount; });

                // 创建柱状图
                var barChart = echarts.init(document.getElementById('barChart'));
                var barOptions = {
                    title: {
                        text: '各部门员工总数'
                    },
                    tooltip: {},
                    xAxis: {
                        data: departmentNames
                    },
                    yAxis: {},
                    series: [{
                        name: '员工总数',
                        type: 'bar',
                        data: totalEmployees
                    }]
                };
                barChart.setOption(barOptions);

                // 创建饼图
                var pieChart = echarts.init(document.getElementById('pieChart'));
                var pieOptions = {
                    title: {
                        text: '性别分布'
                    },
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    series: [
                        {
                            name: '性别',
                            type: 'pie',
                            radius: '50%',
                            data: [
                                {value: maleCounts.reduce((a, b) => a + b, 0), name: '男性'},
                                {value: femaleCounts.reduce((a, b) => a + b, 0), name: '女性'}
                            ]
                        }
                    ]
                };
                pieChart.setOption(pieOptions);

                //折线图
                var myChart = echarts.init(document.getElementById('main3'));

                // 指定图表的配置项和数据
                var option = {
                    xAxis: {
                        type: 'category',
                        data: data.xData,
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: data.yData,
                            type: 'line'
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            error: function(xhr, status, error) {
                // 错误处理
                console.error('获取数据时出错:', error);
            }
        });
    });
    $(document).ready(function() {
        // 发送AJAX请求获取数据
        $.ajax({
            url: 'work2.php', // PHP脚本的URL
            type: 'GET',
            dataType: 'json',
            success: function(data) {
                // 成功接收到数据
                //折线图
                var myChart = echarts.init(document.getElementById('main3'));
                // 指定图表的配置项和数据
                var option = {
                    xAxis: {
                        type: 'category',
                        data: data.xData,
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            data: data.yData,
                            type: 'line'
                        }
                    ]
                };

                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
            },
            error: function(xhr, status, error) {
                // 错误处理
                console.error('获取数据时出错:', error);
            }
        });
    });
</script>
</body>
</html>